<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>homework</title>
	</head>

	<body>
		<div class="header row center-span middle-span">
			<div class="header-inner row center-span middle-span">
				<div class="logo"></div>
				<div class="avatar-div row middle-span" id="avatar-div">
					<div class="avatar">
						<img src="static/imgs/ubuntu.png" alt="" />
					</div>
					<div class="icon-angle-down"></div>

					<div class="user-div col center-span" id="user-div">
						<div class="cell row middle-span">
							<div class="icon-id-card"></div>
							<div>Profile</div>
						</div>
						<div class="cell row middle-span">
							<div class="icon-sign-in"></div>
							<div>Sign Out</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main row">
			<div class="sidebar" id="sidebar">
				<div class="history">
					<div class="title">History</div>
					<div class="list">
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
						<li>bjstdmngbgr08.thoughtworks.com</li>
					</div>
				</div>
			</div>
			<div class="main-content col">
				<div class="top-div row between-span">
					<div class="top-info building row center-span middle-span">
						<div class="title f-18">Building</div>
						<div class="icon-cog"></div>
						<div class="number" id="build-count">3</div>
					</div>
					<div class="top-info idle row center-span middle-span">
						<div class="title f-18">Idle</div>
						<div class="icon-coffee"></div>
						<div class="number" id="idle-count">5</div>
					</div>
					<div class="all-info row between-span">
						<div class="info-cell col around-span center-span">
							<div class="f-12">ALL</div>
							<div class="f-20" id="all-count">8</div>
						</div>
						<div class="info-cell col around-span center-span">
							<div class="f-12">PHYSICAL</div>
							<div class="f-20">4</div>
						</div>
						<div class="info-cell col around-span center-span">
							<div class="f-12">VIRTUAL</div>
							<div class="f-20">4</div>
						</div>
					</div>
				</div>
				<div class="tool-bar row middle-span">
					<div class="type-cell col center-span middle-span on">All</div>
					<div class="type-cell col center-span middle-span">Physical</div>
					<div class="type-cell col center-span middle-span">Virtual</div>
					<div class="search-bar row middle-span">
						<div class="icon-search"></div>
						<div class="input-div col center-span middle-span">
							<input type="text" />
						</div>
					</div>
					<div class="list-type row middle-span">
						<div class="icon-th-card"></div>
						<div class="icon-th-list on"></div>
					</div>
				</div>
				<div class="main-list" id="main-list"></div>
			</div>
		</div>
		<div class="add-div col" id="add-popup">
			<div class="jiao"></div>
			<div class="icon-close" id="add-div-close-icon"></div>
			<div class="title">Separate multiple resource name with commas</div>
			<input type="text" id="addInput" placeholder="input value" />
			<div class="row btn-div">
				<div class="add-btn btn" id="add-div-add-btn">Add Resource</div>
				<div class="cancle-btn btn" id="add-div-close-btn">Cancel</div>
			</div>
		</div>
		<div class="footer row middle-span center-span">
			<div class="">&copy;</div>
			<div>Copyright 2017</div>
			<div>ThoughtWorks</div>
		</div>
	</body>

	<script type="text/javascript">
	</script>

</html>